<template>
    <div class="setDataMaintain-view">
        <div  class="dataMaintain-view-user2">
            <el-form :model="distributorInfo" :rules="rules" ref="distributorInfo" label-width="100px" class="demo-ruleForm">
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title">分销商名称：</div>
                <div>
                    <el-input
                            class="dataMaintain-view-list-input"
                            placeholder="分销商名称"
                            :disabled="true"
                            v-model="distributorInfo.name"
                            clearable>
                    </el-input>
                </div>
            </div>
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title">所在地：</div>
                <div>
                    <el-select  class="dataMaintain-view-list-option" @change="getprovince" value-key="id" v-model="distributorInfo.province" :placeholder="distributorInfo.province.name">
                        <el-option
                                v-for="item in citylist"
                                :key="item.id"
                                :label="item.name"
                                :value="item">
                        </el-option>
                    </el-select>
                    <el-select  class="dataMaintain-view-list-option" @change="getcitymsg" value-key="id" v-model="distributorInfo.city" :placeholder="distributorInfo.city.name">
                        <el-option
                                v-for="item in citylist1"
                                :key="item.id"
                                :label="item.name"
                                :value="item">
                        </el-option>
                    </el-select>
                    <el-select  class="dataMaintain-view-list-option"  value-key="id"  v-model="distributorInfo.area" :placeholder="distributorInfo.area.name">
                        <el-option
                                v-for="item in citylist2"
                                :key="item.id"
                                :label="item.name"
                                :value="item">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title">管理员账号：</div>
                <div>
                    <el-input
                            class="dataMaintain-view-list-input"
                            placeholder="管理员账号"
                            v-model="distributorInfo.mobile"
                            :disabled="true"
                            clearable>
                    </el-input>
                </div>
            </div>
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title">联系人职务：</div>
                <div>
                    <el-input
                            class="dataMaintain-view-list-input"
                            placeholder="请输入联系人职务"
                            v-model="distributorInfo.post"
                            clearable>
                    </el-input>
                </div>
            </div>
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title">联系人：</div>
                <div>
                    <el-input
                            class="dataMaintain-view-list-input"
                            placeholder="请输入联系人"
                            v-model="distributorInfo.contatcter"
                            clearable>
                    </el-input>
                </div>
            </div>
                <el-form-item prop="contatctTel">
                    <div class="dataMaintain-view-list">
                        <div class="dataMaintain-view-list-title">联系人电话：</div>
                        <div>
                            <el-input
                                    class="dataMaintain-view-list-input"
                                    placeholder="请输入联系人电话"
                                    v-model="distributorInfo.contatctTel"
                                    clearable>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title">渠道负责人：</div>
                <div>
                    <el-input
                            class="dataMaintain-view-list-input"
                            placeholder="渠道负责人"
                            v-model="distributorInfo.manager"
                            :disabled="true"
                            clearable>
                    </el-input>
                </div>
            </div>
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title">渠道负责人电话：</div>
                <div>
                    <el-input
                            class="dataMaintain-view-list-input"
                            placeholder="渠道负责人电话"
                            v-model="distributorInfo.managerTel"
                            :disabled="true"
                            clearable>
                    </el-input>
                </div>
            </div>
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title">渠道职务：</div>
                <div>
                    <el-input
                            class="dataMaintain-view-list-input"
                            placeholder="渠道职务"
                            v-model="distributorInfo.managerPost"
                            :disabled="true"
                            clearable>
                    </el-input>
                </div>
            </div>
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title">分成比例（%）：</div>
                <div>
                    <el-input
                            class="dataMaintain-view-list-input"
                            placeholder="分成比例"
                            v-model="distributorInfo.proportions"
                            :disabled="true"
                            clearable>
                    </el-input>
                </div>
            </div>
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title">备注：</div>
                <div>
                    <el-input
                            class="dataMaintain-view-list-input1"
                            type="textarea"
                            placeholder="请输入备注"
                            v-model="distributorInfo.remark">
                    </el-input>
                </div>
            </div>
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title">附件上传：</div>
                <div class="dataMaintain-view-list-img">
                   <img :src="distributorInfo.distLogo">
                </div>
            </div>
            </el-form>
            <div class="dataMaintain-view-list">
                <div class="dataMaintain-view-list-title"></div>
                <div>
                    <el-button  class="dataMaintain-view-list-button" type="primary" @click="preservation('distributorInfo')">保存</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {telePhone} from "../../../utils/regular"
    export default {
        name: "setDataMaintain",
        data(){
            var validatePhone= (rule, value, callback) => {
                if (value&&!telePhone(value)) {
                    callback(new Error('请输入正确的11位手机号码'))
                }else {
                    callback();
                }
            }
            return{
                organizationId: this.$store.getters.userData.userMsg.id,//组织id
                distributorInfo:{
                    name:"",
                    province:"",
                    area:"",
                    city:"",
                    mobile:"",
                    post:"",
                    contatcter:"",
                    contatctTel:"",
                    manager:"",
                    managerTel:"",
                    managerPost:"",
                    proportions:"",
                    remark:"",
                    distLogo:"",

                },
                rules: {
                    contatctTel: [
                        {  required: false,validator: validatePhone, trigger: 'blur' }
                    ],
                },
                dialogImageUrl: '',
                dialogVisible: false,
                citylist: [],
                citylist1:[],
                citylist2:[],
                value: ''
            }
        },
        watch: {
        },
        mounted(){
            this.getuserinfo()
            this.getcity()
        },
        methods: {
            //查看省
            getprovince(event){
                
                this.citylist2=[]
                if(event){
                    let _this = this;
                    let params={
                        pid:event.id,
                    }
                    _this.Api.setting.cityList(params).then((data)=>{
                        console.log("kkkkkkkkkkkkkkkkkkk",data)
                        _this.citylist1=data.data;
                        _this.distributorInfo.city={}
                        _this.distributorInfo.area={}
                    })
                }
                console.log("省省省省省省省省省省省省省省省省省省",event)
            },
            getcitymsg(event){
                //this.distributorInfo.area={}
                if(event){
                    let _this = this;
                    let params={
                        pid:event.id,
                    }
                    _this.Api.setting.cityList(params).then((data)=>{
                        console.log("kkkkkkkkkkkkkkkkkkk",data)
                        _this.citylist2=data.data;
                    })
                }
                console.log("事实上司",event)
            },
            getuserinfo(){
                let _this=this
                let params={
                    id:this.organizationId,
                }
                _this.Api.setting.distSeeDistributorInfo(params).then((data)=>{
                    this.distributorInfo=data.data
                    this.distributorInfo.province={
                        name:data.data.province
                    }
                    this.distributorInfo.city={
                        name:data.data.city
                    }
                    this.distributorInfo.area={
                        name:data.data.area
                    }
                   console.log(data,"?????????????????????")
                }).catch(() => {
                    this.$message.error('经纪人查看范围修改失败');
                });
            },
            getcity(){
                let _this = this;
                let params={
                    pid:0,
                }
                _this.Api.setting.cityList(params).then((data)=>{
                    console.log("kkkkkkkkkkkkkkkkkkk",data)
                    _this.citylist=data.data;
                })
            },
            preservation(formName){
                let _this = this;
                let params={
                    id:this.organizationId,//分销商id
                    province:this.distributorInfo.province.name,
                    city:this.distributorInfo.city.name,
                    area:this.distributorInfo.area.name,
                    contatcter:this.distributorInfo.contatcter,
                    post:this.distributorInfo.post,
                    contatctTel:this.distributorInfo.contatctTel,
                    remark:this.distributorInfo.remark,
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.Api.setting.distSaveDistributorInfo(params).then((data)=>{
                            if(data.returnCode==10000){
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                            }else {
                                this.$message({
                                    message: data.msg,
                                    type: 'warning'
                                });
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    }
</script>

<style>
    .el-form-item__content{
        margin-left: 0px !important;
    }
</style>
<style scoped rel="stylesheet/scss" lang="scss">
    .setDataMaintain-view{
        margin: 24px;
        background-color: #ffffff;
        .dataMaintain-view-user2{
            padding-bottom: 40px;
            .dataMaintain-view-list{
                display: flex;
                padding-top: 32px;
                .dataMaintain-view-list-title{
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.85);
                    line-height:32px;
                    min-width:115px;
                    text-align: right;
                    margin-left: 32px;
                    margin-right: 5px;
                }
                .dataMaintain-view-list-img{
                    width:88px;
                    height:88px;
                    border-radius:4px;
                    img{
                        width:88px;
                        height:88px;
                    }
                }
                .dataMaintain-view-list-input{
                    width:468px;
                    height:32px;
                    background:rgba(255,255,255,1);
                    border-radius:4px;
                }
                .dataMaintain-view-list-input1{
                    width:468px;
                    background:rgba(255,255,255,1);
                    border-radius:4px;
                }
                .dataMaintain-view-list-option{
                    width:150px;
                    height:32px;
                    background:rgba(255,255,255,1);
                    border-radius:4px;
                    margin-right: 5px;
                }
                .dataMaintain-view-list-button{
                    width:468px;
                    height:32px;
                    background:rgba(24,144,255,1);
                    border-radius:4px;
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                }
            }
        }
    }
</style>